import React, { useMemo } from 'react';
import { viewSizeFormat } from '@/common/format';
import LogoGray from '@/assets/images/logo_gray.png';

import styles from './style.scss';

const PageLoading = ({ label, height, background }) => {
  const curStyle = useMemo(() => {
    const styleObj = {};
    if (typeof height === 'number') {
      styleObj.height = `${viewSizeFormat(height)}px`;
    }
    if (background) {
      styleObj.background = background;
    }

    return styleObj;
  }, [height, background]);

  return (
    <div className={styles.container} style={curStyle}>
      <img className={styles.logo} src={LogoGray} />
      <div className={styles.label}>{label}</div>
    </div>
  );
};

PageLoading.defaultProps = {
  label: '正在加载中',
  height: 640,
};

export default PageLoading;
